<template>
    <div class="one" style="width:1030px;margin:0 auto">
        <el-main id="main" style="text-align:left">
            <h2 style="text-align:center">银行及相关金融业从业人员及工资总额</h2>
            <div style="text-align:right">
                <p>表号：711—5表</p>
                <p>制定机关：国家统计局国务院经济普查办公室</p>
                <p>文号：国统字（2018）号</p>
                <p>有效期至：2019年6月</p>
            </div>
            <div>
                <p>组织机构代码:&nbsp;{{organizationCode}}</p>
                <p>统一社会信用代码:&nbsp;{{socialCreditCode}}</p>
                <p>单位详细名称:&nbsp;{{unitDetailedName}}</p>
            </div>
             <el-form ref="form" :rules="rules" :model="form"   style="text-align:left">
                <el-form-item>
                    <table style="text-align:center;margin-top:5px;">
                        <thead>
                            <tr>
                                <th class="bian" style="width:400px;text-align:center">指标名称</th>
                                <th class="bian" style="width:200px;text-align:center">计量单位</th>
                                <th  class="bian" style="width:100px;text-align:center">代码</th>
                                <th  style="width:300px;text-align:center">本年</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="bian">甲</td>
                                <td class="bian">乙</td>
                                <td class="bian">丙</td>
                                <td >1</td>
                            </tr>
                            <tr>
                                <td class="bian">一、从业人员</td>
                                <td class="bian">-</td>
                                <td class="bian">-</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td class="bian">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;从业人员期末人数</td>
                                <td class="bian">人</td>
                                <td class="bian">01</td>
                                <td>
                                    <el-form-item prop="finalEmployeesNumber">
                                        <input type="text" name="" v-model="form.finalEmployeesNumber" maxlength=11 @keyup="testPeople(form.finalEmployeesNumber,'finalEmployeesNumber')">
                                        <div class="red" v-show="saveData.finalEmployeesNumber">请输入正整数</div>
                                    </el-form-item>
                                    
                                </td>
                            </tr>
                            <tr>
                                <td class="bian">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;其中:女性</td>
                                <td class="bian">人</td>
                                <td class="bian">02</td>
                                <td>
                                    <el-form-item prop="femaleNumber">
                                        <input type="text" name="" v-model="form.femaleNumber" maxlength=11 @keyup="testPeople(form.femaleNumber,'femaleNumber')">
                                        <div class="red" v-show="saveData.femaleNumber">请输入正整数</div>
                                    </el-form-item>
                                </td>
                            </tr>
                            <tr>
                                <td class="bian">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;从业人员平均人数</td>
                                <td class="bian">人</td>
                                <td class="bian">08</td>
                                <td>
                                    <el-form-item prop="averageEmployeesNumber">
                                        <input type="text" name="" v-model="form.averageEmployeesNumber" maxlength=11 @keyup="testPeople(form.averageEmployeesNumber,'averageEmployeesNumber')">
                                        <div class="red" v-show="saveData.averageEmployeesNumber">请输入正整数</div>
                                    </el-form-item>
                                </td>
                            </tr>
                            <tr>
                                <td class="bian">二、工资总额</td>
                                <td class="bian">-</td>
                                <td class="bian">-</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td class="bian">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;从业人员工资总额</td>
                                <td class="bian">千元</td>
                                <td class="bian">12</td>
                                <td>
                                    <el-form-item prop="totalWages">
                                        <input type="text" name="" v-model="form.totalWages"  @keyup="testMoney(form.totalWages,'totalWages')" @blur="testReason(form.totalWages)">
                                        <div class="red" v-show="saveData.totalWages">请输入小数点后5位至小数点前20位之间的数字</div>
                                    </el-form-item>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </el-form-item>
                <div v-show="totalReason">
                <h4>补充资料：</h4>  
                <el-form-item prop="reason">
                <!-- <el-form-item prop="reason" :required="form.reason ===2 || form.reason===3? true:false"> -->
                    <p>&nbsp;&nbsp;1.无法填报“从业人员工资总额”数据的原因：</p> 
                    <el-radio-group v-model="form.reason" @change="sourceFilter">
                    <!-- <el-radio-group v-model="form.reason" @change="sourceFilter" :disabled="form.reason ===2 || form.reason===3? false:true"> -->
                        <el-radio :label="1" name="reason"  style="margin-left:30px;">（1）本单位无生产经营活动。</el-radio><br>
                        <el-radio :label="2" name="reason" style="margin-left:30px;">（2）本单位不独立核算，工资有上级单位发放。</el-radio><br>
                        <el-radio :label="3" name="reason" style="margin-left:30px;">（3）本单位一套人马多块牌子，工资已在另一家单位统计。</el-radio><br>
                        <el-radio :label="4" name="reason" style="margin-left:30px;">（4）本单位属于单位内部性组织、互助性组织或非经营性组织，没有工资发放。</el-radio><br>
                        <el-radio :label="5" name="reason" style="margin-left:30px;">（5）本单位为没有雇员的家庭经营单位，没有工资发放。</el-radio><br>
                        <el-radio :label="6" name="reason" style="margin-left:30px;">（6）其他原因</el-radio>
                    </el-radio-group>
                    <div class="red" v-show="saveData.reason">请选择无法填报“从业人员工资总额”数据的原因</div>
                </el-form-item>
                <div  v-show="one">
                        <p>&nbsp;&nbsp;2.原因为(2)、(3)的单位填报</p>
                        <!-- <el-form-item label="选择代码" prop="selectCode">
                            <el-select v-model="form.selectCode" placeholder="请选择" style="float: left;border-color: #67c23a;">
                                <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.label" style="display:block">
                                </el-option>
                            </el-select>
                        </el-form-item> 
                        <el-form-item :label="form.selectCode" prop="code" >
                            <el-input type="input" v-model="form.code"></el-input>
                        </el-form-item> -->
                    <el-form-item prop="upOrganizationCode"> 
                        发放工资的法人单位：&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;组织机构代码：<el-input  class="width400" v-model="form.upOrganizationCode" aria-required="" @keyup.native="testEln(form.upOrganizationCode,'upOrganizationCode')"></el-input>
                    <div style="margin-left:270px;" class="red" v-show="saveData.upOrganizationCode">请输入数字或英文</div>
                    <div style="margin-left:270px;" class="red" v-show="showupSocialCreditCode">请输入统一社会信用代码或组织机构代码至少一项</div> 
                    </el-form-item> 
                    <el-form-item prop="upSocialCreditCode">
                        &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;
                        统一社会信用代码： <el-input  class="width400" v-model="form.upSocialCreditCode" @keyup.native="testEln(form.upSocialCreditCode,'upSocialCreditCode')"></el-input>    
                    <div style="margin-left:270px;" class="red" v-show="saveData.upSocialCreditCode">请输入数字或英文</div>
                        <div style="margin-left:270px;" class="red" v-show="showupSocialCreditCode">请输入统一社会信用代码或组织机构代码至少一项</div>
                    </el-form-item>
                    <el-form-item prop="upUnitDetailedName">
                        &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;
                        单位详细名称：<el-input class="width400" v-model="form.upUnitDetailedName"></el-input>    
                    <div style="margin-left:270px;" class="red" v-show="saveData.upUnitDetailedName">请输入汉字或英文</div>
                    <div style="margin-left:270px;" class="red" v-show="showupUnitDetailedName">请输入单位详细名称</div>   
                    </el-form-item>
                </div>
                </div>
                <el-form-item>
                    <span style="font-size:8px">单位负责人：</span>
                    <el-input style="width:100px" v-model="form.unitHead"></el-input>
                    <span style="font-size:8px">统计负责人：</span>
                    <el-input style="width:100px" v-model="form.statisticalControlOfficer"></el-input>
                    <span style="font-size:8px">填表人：</span>
                    <el-input style="width:100px" v-model="form.fillFormBy"></el-input>
                    <span style="font-size:8px">联系电话：</span>
                    <el-input style="width:120px" v-model="form.phone"></el-input>
                    <span style="font-size:8px">出报日期：</span>
                    <el-date-picker  v-model="form.createTime" class="width100 marginBottom"    type="date"  placeholder="选择日期"> </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <div>
                        <p>说明：1.统计范围：辖区内金融部门负责的单位以外的货币金融服务及其他金融业法人单位。</p>
                        <p>&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;2.报送日期及方式：2019年4月30日前通过非一套表单位采集处理软件或手持电子终端设备采集数据。</p>
                    </div>
                </el-form-item>
            </el-form>
        </el-main>
        <div slot="footer" class="dialog-footer">
            <el-button @click="temporarySave('formData')" type="primary">暂存</el-button>
            <el-button type="success" @click="save('form')">提交</el-button> 
            <el-button type="danger" @click="download">下载PDF表格</el-button>
        </div>
    </div>
</template>
<script>
// import axios from 'axios';
// import { valid } from 'semver';
  
export default {
     name:'App',
    data(){
        return{
            one:false,
            id:null,
            organizationCode:this.$store.get('organizationCode'),//组织机构代码
            socialCreditCode:this.$store.get('socialCreditCode'),//统一社会信用代码
            unitDetailedName:this.$store.get('unitDetailedName'),//单位详细名称
            isReason:false,//判断是否填发放工资的法人单位
            reasonValue:'',//无法填报“从业人员工资总额”数据的原因 时选2或3时发放工资的法人单位
            totalReason:true,//不填写总额原因
            showupUnitDetailedName:false,
            showupSocialCreditCode:false,
            form:{
                // selectCode: '组织机构代码',  //
                // code: '',
                finalEmployeesNumber:'',//(01)从业人员期末人数
                femaleNumber:'',//(02)其中：女性人数
                averageEmployeesNumber:'',//(08)从业人员平均人数
                totalWages:'',//(12)从业人员工资总额
                reason:'',//1.无法填报“从业人员工资总额”数据的原因
                upOrganizationCode:'',//组织机构代码  发放工资的法人单位
                upSocialCreditCode:'',//统一社会信用代码 发放工资的法人单位
                upUnitDetailedName:'',//单位详细名称 发放工资的法人单位
                unitHead:'',//单位负责人
                statisticalControlOfficer:'',//统计负责人
                fillFormBy:'',//填表人
                phone:'',//联系电话
                createTime:'',//填表时间
            },
            saveData:{//暂存判断
                finalEmployeesNumber:false,//(01)从业人员期末人数
                femaleNumber:false,//(02)其中：女性人数
                averageEmployeesNumber:false,//(03)从业人员平均人数
                totalWages:false,//(04)从业人员工资总额 千元
                reason:false,//1.无法填报“从业人员工资总额”数据的原因
                upOrganizationCode:false,//组织机构代码  发放工资的法人单位
                upSocialCreditCode:false,//统一社会信用代码 发放工资的法人单位
                upUnitDetailedName:false,//单位详细名称 发放工资的法人单位
            },
            rules: {
                finalEmployeesNumber: [
                    { required: true, message: '请输入从业人员期末人数', trigger: 'none' },
                ],
                averageEmployeesNumber: [
                    { required: true, message: '请输入从业人员平均人数', trigger: 'none' },
                ],
                femaleNumber: [
                    { required: true, message: '请输入女性人数', trigger: 'none' },
                ],
                // totalWages: [
                //     { required: true, message: '请输入从业人员工资总额', trigger: 'none' },
                // ],
                // reason: [
                //     { required: true, message: '请选择无法填报“从业人员工资总额”数据的原因', trigger: 'none' },
                // ],
                // upOrganizationCode:[
                // { required: true, message: '请输入发放工资的法人单位组织机构代码', trigger: 'blur' },
                // { min: 9, max: 9, message: '长度为9个字符', trigger: 'blur' } 
                // ],
                //  upSocialCreditCode:[
                // { required: true, message: '请输入发放工资的法人单位统一社会信用代码', trigger: 'blur' },
                // { min: 18, max: 18, message: '长度为18个字符', trigger: 'blur' } 
                // ],
                // upUnitDetailedName: [
                // { required: true, message: '请输入发放工资的法人单位单位全称', trigger: 'blur' },
                // { min: 5, max: 30, message: '长度在 4 到 30 个字符', trigger: 'blur' }
                // ]
            },
            // options: [
            //             {
            //                 value: 'upOrganizationCode',
            //                 label: '组织机构代码'
            //             }, {
            //                 value: 'upSocialCreditCode',
            //                 label: '社会统一信用代码'
            //             } 
            //         ],
            //         value: ''
        }
    }, 
    mounted:function(){
        this.getDate();    
    },
    methods:{
        getDate(){
            let self =this;
            let baseId=this.$store.get("companyId");
            console.log(baseId);
            this.$http({
                mothod:'get',
                url:'711Five/select?baseId='+baseId,
            }).then(function(res){
                console.log(res, 'res')
                console.log(res.data.length, 'length');
                if(res.status===200){
                    if(res.data.status===401){
                        self.$message.error("请先登录！");
                        self.$router.push({ path: '/' });
                        return;
                    }
                    if(res.data.length===0){
                        self.id =null;
                    }else{
                        if(res.data[0].totalWages || res.data[0].totalWages === 0){
                            self.totalReason = false;
                        }else{
                            self.totalReason = true;
                        }
                        self.form = res.data[0];
                        self.id = res.data[0].id;
                        self.sourceFilter(res.data[0].reason)
                        self.form.updateTime = res.data[0].newupdateTime;
                    }
                }else{
                    self.$message.error(res.message);
                }
            }).catch(function(err){
                console.log(err)
            })
        },
        save(formName){
           console.log(this.form.totalWages!=0);
            console.log(!this.form.totalWages);
            //判断合法输入
            if(this.form.totalWages || this.form.totalWages==='0'){
                this.saveData.reason = false;
                this.form.reason = null;
            }
             if(this.form.reason){
                this.saveData.reason = false;
            }
            if(this.form.reason!=2 && this.form.reason!=3){
                this.saveData.upOrganizationCode = false;
                this.saveData.upSocialCreditCode = false;
                this.saveData.upUnitDetailedName = false;
                this.form.upOrganizationCode = null;
                this.form.upSocialCreditCode = null;
                this.form.upUnitDetailedName = null;
            }
            for(var k in this.saveData){
                if(this.saveData[k] === true){
                    return;
                }
            }
            //判断必填
            if(!this.form.totalWages && this.form.totalWages!='0'){
                console.log(0);
                if(!this.form.reason){
                    this.saveData.reason = true;
                    return;
                }
            }
            if(this.form.reason===2 || this.form.reason===3){
                console.log(1);
                if(!this.form.upUnitDetailedName && this.form.upUnitDetailedName!='0'){
                    this.showupUnitDetailedName = true;
                    console.log(12);
                    return;
                }else if(!this.form.upSocialCreditCode && this.form.upSocialCreditCode!='0'){
                    if(!this.form.upOrganizationCode && this.form.upOrganizationCode!='0'){
                        this.showupSocialCreditCode = true;
                        console.log(1222);
                        return;
                    }
                }
            }
            this.$refs[formName].validate((valid) => {
                if(valid){
                    let self = this;
                    let data = this.form;
                    data.baseId= this.$store.get("companyId");
                    data.id=this.id;
                    data.state = 1;
                    console.log(data);
                    this.$http({
                        method:'post',
                        url:'711Five/submission',
                        data:data,
                    }).then(function(res){
                        console.log(res);
                        if(res.status === 200){
                            self.$message.success(res.data.message);
                            self.form = res.data.data;
                            self.form.updateTime = res.data.data.newupdateTime;
                            self.$router.push({ path: '/home' })
                        
                        }else{
                            self.$message.error(res.data.message);
                        }
                    }).catch(function(err){
                        console.log(err);   
                    })
                }else{
                    return false;
                }
            });
        },
        //暂存
        temporarySave(form){
          //判断合法输入
            if(this.form.totalWages || this.form.totalWages=== 0){
                this.saveData.reason = false;
                this.form.reason = null;

            }
            if(this.form.reason!=2 && this.form.reason!=3){
                this.saveData.upOrganizationCode = false;
                this.saveData.upSocialCreditCode = false;
                this.saveData.upUnitDetailedName = false;
                this.form.upOrganizationCode = null;
                this.form.upSocialCreditCode = null;
                this.form.upUnitDetailedName = null;
            }
            for(var k in this.saveData){
            if(this.saveData[k] === true){
                return;
            }
            }
            let self = this;
            let data = this.form;
            data.baseId= this.$store.get("companyId");
            data.id=this.id;
            data.state = 0;
            console.log(data);
            this.$http({
                method:'post',
                url:'711Five/submission',
                data:data,
            }).then(function(res){
                console.log(res);
                 if(res.status === 200){
                    self.$message.success(res.data.message);
                    self.form = res.data.data;
                    self.form.updateTime = res.data.data.newupdateTime;
                    self.$router.push({ path: '/home' })
                }else{
                    self.$message.error(res.data.message);
                }
            }).catch(function(err){
                console.log(err);
                
            })
        },
        sourceFilter(label){
            console.log(label);
            if(label ===2 || label===3){
                this.one = true;
            }else{
                this.one = false;
            }
        },
           //检验输入金额
        testMoney(value,data){
            let reg =  /^(\-|\+?)\d{1,15}(\.\d{1,5})?$/;
            if(!reg.test(value) && value){
                for(var r in this.saveData){
                if(r === data){
                    this.saveData[r] = true;
                }
                }
            }else if(reg.test(value) || !value){
                for(var rs in this.saveData){
                if(rs === data){
                    this.saveData[rs] = false;
                }
                }
            }
        },
        //检验输入人数
        testPeople(value,data){
            let reg = /^(\d{1,11})$/;
            if(!reg.test(value) && value){
                for(var r in this.saveData){
                if(r === data){
                    this.saveData[r] = true;
                }
                }
            }else if(reg.test(value) || !value){
                for(var rs in this.saveData){
                if(rs === data){
                    this.saveData[rs] = false;
                }
                }
            }
        },
         //下载pdf
        download(){
            let self = this;
            let data = this.form;
            console.log(data.state);
            if(data.state === 2){
                console.log(555555555555555555);
                //  let url = 'http://192.168.0.131:8001/register/711Base/downLoad?baseId='+this.$store.get("companyId");
            let url = this.$downloadUrl+'/711Five/downLoad?baseId='+this.$store.get("companyId");
            window.location.href=url;
            }else{
                this.$message.error('有未提交表不能下载');
            }
        },
         //检验组织机构代码，社会信用代码
        testEln(value,data){
            console.log("1111");
            let reg = /^[a-zA-Z0-9]*$/;
            if(!reg.test(value) && value){
                    this.saveData[data] = true;
            }else if(reg.test(value) || !value){
                    this.saveData[data] = false;
            }
        },
        // 检验是否填总额原因
        testReason(value){
            console.log(value);
            if(value || value === 0){
                this.totalReason = false;
            }else{
                this.totalReason = true;
            }
        },

    },
    watch:{
        // 'form.reason'(val){
        //     this.$nextTick(()=>{
        //     if(val !== 2||val !== 3){
        //         this.$refs.form.validateField('reason');
        //         this.form.reason='';//2和3选一

        //     }
        //     })
        // },
    }  
}
</script>
<style scoped>
     #main input{
        border:0px solid #dcdfe6;
        border-bottom: 1px solid #1d1e20;
        border-radius: 0;
    }
    .width400{
        width: 400px;
    }
     #main table tr,#main table td,#main table th{
        /* border-right: 1px solid #ddd; */
        /* border-left: 1px solid #ddd; */
        border-bottom: 1px solid #DDD;
        border-top: 1px solid #DDD;
    }
    .bian{
        border-right: 1px solid #ddd;
    }
    .dialog-footer{
        text-align: center
    }
</style>

